<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '物流信息',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full bg-#F6F6F8 pos-relative z-1">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">物流信息</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full home-content">
        <view class="flex">
          <view class="w-full tab-content">
            <view class="w-full hr-60 ps-l-28 flex justify-start items-center">
              <text class="font-size-24 text-blue-1 font-400">2个包裹已发出</text>
            </view>
            <view class="w-full" v-for="(order, ri) in orderList" :key="ri">
              <view class="w-full bg-white p-x-28">
                <view
                  class="flex justify-between items-center ps-t-32 ps-b-26 font-size-32 text-gray-333"
                >
                  <view>
                    {{ order.statusText }}
                  </view>
                  <view>{{ order.orderNumber }}</view>
                </view>
                <view class="font-size-24 font-400 text-gray-999">{{ order.addressText }}</view>
              </view>
              <view
                class="w-full p-x-28 ps-t-32 bdr-top-#F5F5F5-2 bg-white flex justify-start flex-wrap"
              >
                <view
                  class="flex justify-start ps-b-20 mg-r-20"
                  v-for="(goods, gi) in order.goodsList"
                  :key="gi"
                >
                  <view class="wr-176 hr-176 b-rd-8 overflow-hidden">
                    <wd-img :width="'176rpx'" :height="'176rpx'" :src="joy" />
                  </view>
                </view>
              </view>
              <view class="w-full p-x-28 bg-white ps-b-32 mg-b-20">
                <view class="flex justify-between items-center b-rd-8 font-size-28">
                  <view class="text-gray-333 font-500 line-h-44">
                    <text>共{{ order.goodsList.length }}件商品</text>
                  </view>
                  <view class="line-h-40">
                    <text class="text-blue-1 font-500" @click="handleClickDetail">查看详情</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'TransportList',
})
const { safeAreaInsets } = uni.getSystemInfoSync()
const handleClickLeft = () => {}
const pagesBack = () => {
  uni.switchTab({
    url: '/pages/home/person',
  })
}
const joy = ref('../../static/images/background/image-1.png')
const tab = ref(0)
const orderList: any = reactive([
  {
    orderNumber: '顺丰快递 SF-098304784749',
    statusText: '配送中',
    addressText: '【上海市】浦东张江站点服务部已揽收，业务员某某配送中',
    goodsList: [
      {
        image: '../../static/images/background/image-1.png',
        // name: '商品名称商品名称商品名称商品名称商品名称',
        // price: '￥50',
        // size: '灰色；S',
        // count: 'X 1',
      },
      {
        image: '../../static/images/background/image-1.png',
        // name: '商品名称商品名称',
        // price: '￥50',
        // size: '灰色；S',
        // count: 'X 1',
      },
    ],
  },
  {
    orderNumber: '顺丰快递 SF-098304784749',
    statusText: '配送中',
    addText: '顺丰快递 SF-098304784749',
    goodsList: [
      {
        image: '../../static/images/background/image-1.png',
        // name: '商品名称商品名称商品名称商品名称商品名称',
        // price: '￥50',
        // size: '灰色；S',
        // count: 'X 1',
      },
      {
        image: '../../static/images/background/image-1.png',
        // name: '商品名称商品名称',
        // price: '￥50',
        // size: '灰色；S',
        // count: 'X 1',
      },
    ],
  },
])
const handleClickDetail = () => {
  uni.navigateTo({
    url: '/pages/transport/orderTransport',
  })
}
onLoad((e: any) => {
  const id: any = e.id
  getData(id)
})
const getData = (id) => {
  // getExpressInfo(id).then((res) => {
  //   console.log(res)
  // })
}
onLoad(() => {})
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
.box-linear-bg {
  background: linear-gradient(90deg, #ece7f6 0%, #dfdfff 100%);
}
.tab-content {
  box-sizing: border-box;
  height: calc(
    100vh - var(--wot-tabs-nav-height, 84rpx) - var(--wot-navbar-height, 88rpx) - var(
        --window-bottom
      )
  );
  overflow: auto;
}
.image-box {
  width: 33.33%;
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
::v-deep .wd-tabs__nav-item {
  font-size: 28rpx !important;
  color: #312f2a !important;
}
::v-deep .wd-tabs {
  background-color: #f6f6f8;
}
::v-deep .wd-tabs.is-slide .wd-tabs__nav-item {
  padding: 0 30rpx;
}
::v-deep .wd-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .wd-step__content {
  padding-left: 10rpx !important;
}
</style>
